import React from 'react'
import Square from './Square'
import './Board.less'

export default class Board extends React.Component {

  BoardClick (i) {
    this.props.onClick(i)
  }

  render () {
    const { squares } = this.props
    return (
      <div>
        {squares.map((squareItem, i) => {
          return (
            i % 3 === 0 && <div className="board-row" key={i}>
              <Square value={squares[i]} onClick={this.BoardClick.bind(this, i)} />
              <Square value={squares[i + 1]} onClick={this.BoardClick.bind(this, i + 1)} />
              <Square value={squares[i + 2]} onClick={this.BoardClick.bind(this, i + 2)} />
            </div>
          )
        })}
      </div>
    )
  }
}
